<template>
    <el-container>
        <el-main>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="change">
                <el-tab-pane label="监控触发" name="Monitor">
                    <monitor v-if="activeName ==='Monitor'"></monitor>
                </el-tab-pane>
                <el-tab-pane label="价格监控" name="MonitorPrice">
                    <monitor-price v-if="activeName ==='MonitorPrice'"></monitor-price>
                </el-tab-pane>
                <el-tab-pane label="LIST" name="MonitorList">
                    <monitor-list v-if="activeName ==='MonitorList'"></monitor-list>
                </el-tab-pane>
                <el-tab-pane label="StockDailyMonitor" name="StockDailyMonitor">
                    <stock-daily-monitor v-if="activeName ==='StockDailyMonitor'"></stock-daily-monitor>
                </el-tab-pane>
                <el-tab-pane label="StockWeekMonitor" name="StockWeekMonitor">
                    <stock-week-monitor v-if="activeName ==='StockWeekMonitor'"></stock-week-monitor>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</template>

<script setup>
import { ref } from 'vue'

import Monitor from '../components/Monitor.vue';
import MonitorPrice from '../components/MonitorPrice.vue';
import MonitorList from '../components/monitor/MonitorList.vue';
import StockDailyMonitor from '../components/StockDailyMonitor.vue';
import StockWeekMonitor from '../components/StockWeekMonitor.vue';

const activeNameKey = "MonitorActiveName"
const activeName = ref(sessionStorage.getItem(activeNameKey) || 'Monitor')

const change = (tabName) => {
    sessionStorage.setItem(activeNameKey, tabName)
}
</script>